<!doctype html>
<html>
<head>
<meta name="description" content="Brython">
<meta name="keywords" content="Python,Brython">
<meta name="author" content="Pierre Quentel">
<meta http-equiv="content-type" content="text/html;charset=utf-8">

<link rel="icon" type="image/png" href="favicon.png" />

<noscript>Please enable Javascript to view this page correctly.</noscript>

<script type="text/javascript" src="/src/brython.js"></script>
<script type="text/javascript" src="/src/brython_stdlib.js"></script>

<script src="/assets/header.brython.js"></script>

<script type="text/python">
"""Load header and text according to the language."""
from browser import document, html
import header

# Get the language specified in the query string (lang=...) and in the browser
# settings.
qs_lang, language = header.show()

# Adapt content to selected language
document["content"].html = document[f"content_{language}"].html

if qs_lang:
    document[f"c_{qs_lang}"].href += f"?lang={qs_lang}"

# If user changes the language in the select box, reload the page.
def change_language(ev):
    sel = ev.target
    new_lang = sel.options[sel.selectedIndex].value
    document.location.href = f"index.html?lang={new_lang}"

for elt in document.select("select.language"):
    elt.bind('change', change_language)

</script>

<script type="text/python">
"""Code for the clock"""

import time
import math

from browser import document
import browser.timer

sin, cos = math.sin, math.cos
width, height = 250, 250 # canvas dimensions
ray = 100 # clock ray

background = "#111"
digits = "#fff"
border = "#333"

def needle(angle, r1, r2, color="#000000"):
    """Draw a needle at specified angle in specified color.
    r1 and r2 are percentages of clock ray.
    """
    x1 = width / 2 - ray * cos(angle) * r1
    y1 = height / 2 - ray * sin(angle) * r1
    x2 = width / 2 + ray * cos(angle) * r2
    y2 = height / 2 + ray * sin(angle) * r2
    ctx.beginPath()
    ctx.strokeStyle = "#fff"
    ctx.moveTo(x1, y1)
    ctx.lineTo(x2, y2)
    ctx.stroke()

def set_clock():
    # erase clock
    ctx.beginPath()
    ctx.fillStyle = background
    ctx.arc(width / 2, height / 2, ray * 0.89, 0, 2 * math.pi)
    ctx.fill()

    # redraw hours
    show_hours()

    # print day
    now_time = time.time()
    now = time.localtime(now_time)
    microsecs = now_time - int(now_time)
    day = now.tm_mday
    ctx.font = "bold 14px Arial"
    ctx.textAlign = "center"
    ctx.textBaseline = "middle"
    ctx.fillStyle = "#000"
    ctx.fillText(day, width * 0.7, height * 0.5)

    # draw needles for hour, minute, seconds
    ctx.lineWidth = 2
    hour = now.tm_hour % 12 + now.tm_min / 60
    angle = hour * 2 * math.pi / 12 - math.pi / 2
    needle(angle, 0.05, 0.5)
    minute = now.tm_min
    angle = minute * 2 *math.pi / 60 - math.pi / 2
    needle(angle, 0.05, 0.85)
    ctx.lineWidth = 1
    second = now.tm_sec + microsecs
    angle = second * 2 * math.pi / 60 - math.pi / 2
    needle(angle, 0.05, 0.85, "#FF0000") # in red

def show_hours():
    ctx.beginPath()
    ctx.arc(width / 2, height / 2, ray * 0.05, 0, 2 * math.pi)
    ctx.fillStyle = digits
    ctx.fill()
    for i in range(1, 13):
        angle = i * math.pi / 6 - math.pi / 2
        x3 = width / 2 + ray * cos(angle) * 0.75
        y3 = height / 2 + ray * sin(angle) * 0.75
        ctx.font = "18px Arial"
        ctx.textAlign = "center"
        ctx.textBaseline = "middle"
        ctx.fillText(i, x3, y3)
    # cell for day
    ctx.fillStyle = "#fff"
    ctx.fillRect(width * 0.65, height * 0.47, width * 0.1, height * 0.06)

canvas = document["clock"]
# draw clock border
if hasattr(canvas, 'getContext'):
    ctx = canvas.getContext("2d")

    ctx.beginPath()
    ctx.arc(width / 2, height / 2, ray, 0, 2 * math.pi)
    ctx.fillStyle = background
    ctx.fill()

    ctx.beginPath()
    ctx.lineWidth = 6
    ctx.arc(width / 2,height / 2, ray + 3, 0, 2 * math.pi)
    ctx.strokeStyle = border
    ctx.stroke()

    for i in range(60):
        ctx.lineWidth = 1
        if i % 5 == 0:
            ctx.lineWidth = 3
        angle = i * 2 * math.pi / 60 - math.pi / 3
        x1 = width / 2 + ray * cos(angle)
        y1 = height / 2 + ray * sin(angle)
        x2 = width / 2 + ray * cos(angle) * 0.9
        y2 = height / 2 + ray * sin(angle) * 0.9
        ctx.beginPath()
        ctx.strokeStyle = digits
        ctx.moveTo(x1, y1)
        ctx.lineTo(x2, y2)
        ctx.stroke()
    browser.timer.set_interval(set_clock, 100)
    show_hours()
else:
    document['navig_zone'].html = "On Internet Explorer 9 or more, " \
        "use a Standard rendering engine"

</script>

<title>Brython</title>

<link rel="stylesheet" href="/brython.css">

</head>

<body onload="brython(1)">

<table id="banner" cellpadding=0 cellspacing=0>
<tr id="banner_row">
<td class="logo"><a href="../index.html" class="logo">Brython</a></td>
</tr>
</table>

<div id="content"></div>

<div id="content_en" style="height:1px;visibility:hidden">

<table style="width:85%;margin-left:10%">
<tr>
<td>

<H2>A Python 3 implementation for client-side web programming</H2>
</td>
<td valign="top">
<select class="language" id="change_lang_en">
<option value="en" selected>English
<option value="es">Espa&ntilde;ol
<option value="fr">Fran&ccedil;ais
</select>
</td>
</tr>
</table>

<table style="width:85%;margin-left:10%">
<tr>
<td style="width:65%;font-size:16px;">
Without a doubt, you've seen a clock like this in demos of HTML5
<p>
However, right click and view the source of this page...
<p>It is not Javascript code! Instead, you will find Python code in a script of type "text/python".
<p>Brython is designed to replace Javascript as the scripting language for the Web. As such, it is a Python 3 implementation (you can take it for a test drive through a web <a href="console.html" id="c_en">console</a>), adapted to the HTML5 environment, that is to say with an interface to the DOM objects and events.
<p><a href="speed_results.html">Speed of execution</a> is similar to CPython for most operations.
<p>The <a href="gallery/gallery_en.html">gallery</a> highlights a few of the possibilities, from creating simple document elements to drag and drop and 3D navigation. A <a href="https://github.com/brython-dev/brython/wiki/Brython%20in%20the%20wild">wiki</a> lists some applications using Brython.
<!-- <p><a href="http://pyschool.net">pyschool.net</a> provides a web-based environment for teachers in Python classes. -->
<p>You can also take a look at <a href="https://github.com/brython-dev/brython/wiki/Brython-videos-and-talks">presentations</a> made in various conferences.</td>

<td style="padding-left:5%;">
<canvas width="250" height="250" id="clock">
<i>sorry, Brython can't make the demo work on your browser ; <br>check if Javascript is turned on
<br><div id="navig_zone"></div></i>
</canvas>
</td>

</tr>

</table>

</div>

<div id="content_fr" style="height:1px;visibility:hidden">
<table style="width:80%;margin-left:10%">
<tr>
<td>

<H2>Une implémentation de Python 3 pour la programmation web côté client</H2>
</td>
<td valign="top">
<select class="language" id="change_lang_fr">
<option value="en">English
<option value="es">Espa&ntilde;ol
<option value="fr" selected>Fran&ccedil;ais
</select>
</td>
</tr>
</table>

<table style="width:80%;margin-left:10%">
<tr>
<td style="width:60%;font-size:16px;">
Des horloges comme celle-ci, vous en avez sans doute déjà vu dans des démos d'HTML5
<p>
Maintenant, regardez le code source de cette page...
<p>Vous ne verrez pas une ligne de Javascript, mais à la place, du code Python dans un script de type "text/python".
<p>Brython a pour objectif de remplacer Javascript comme langage de script des pages Web. Il s'agit donc d'une implémentation de Python 3 (que vous pouvez tester sur la <a href="console.html" id="c_fr">console</a>), adaptée à l'environnement HTML5, c'est-à-dire dotée d'une interface avec les objets et les événements DOM.
<p>La <a href="speed_results.html">vitesse d'exécution</a> est comparable à celle de CPython pour la plupart des opérations.
<p>Une <a href="gallery/gallery_fr.html">galerie</a> présente quelques démos de ce qu'il est possible de faire, depuis la création d'éléments simples jusqu'au glisser-déposer ou la navigation 3D. Un <a href="https://github.com/brython-dev/brython/wiki/Brython%20in%20the%20wild">wiki</a> répertorie quelques applications utilisant Brython.
<!-- <p><a href="http://pyschool.net">pyschool.net</a> fournit un environnement web pour l'enseignement de Python. -->
<p>Vous pouvez également consulter <a href="https://github.com/brython-dev/brython/wiki/Brython-videos-and-talks">plusieurs présentations de Brython</a> dans diverses conférences.
</td>

<td style="padding-left:5%;">
<canvas width="250" height="250" id="clock">
<i>désolé, Brython n'arrive pas à faire fonctionner la démo sur votre navigateur ;<br>vérifiez que Javascript est activé
<br><div id="navig_zone"></div></i>
</canvas>
</td>
</tr>
</table>

</div>

<div id="content_es" style="height:1px;visibility:hidden">
<table style="width:80%;margin-left:10%;">
<tr>
<td>

<H2>Una implementación de Python para la programación web del lado del cliente</H2>
</td>
<td valign="top">
<select class="language" id="change_lang_en">
<option value="en">English
<option value="es" selected>Espa&ntilde;ol
<option value="fr">Fran&ccedil;ais
</select>
</td>
</tr>
</table>

<table style="width:80%;margin-left:10%">
<tr>
<td style="width:60%;font-size:16px;">
Muy cierto que has visto relojes de este tipo en demos de HTML5.
<p>
Pero, mira el código fuente de esta página...
<p>No hay lineas de Javascript, es puro código Python dentro de un script de tipo "text/python".
<p>Brython es diseñado para remplazar a JavaScript como lenguaje de scripting para páginas web. Por lo tanto, es una implementación de Python 3 (que se puede probar en la <a href="console.html" id="c_es">consola</a>), adaptada a un entorno HTML5, es decir, con una interfaz con los objetos y eventos DOM.
<p>Una <a href="gallery/gallery_es.html">galería</a> presenta algunas maquetas de lo que se puede hacer, de la creación de elementos, a ejemplos de arrastrar y soltar a navegación 3D.
<p>Una <a href="https://github.com/brython-dev/brython/wiki/Brython%20in%20the%20wild">wiki</a> que muestra un listado de algunas aplicaciones que funcionan usando Brython.
<p>Además, le puedes echar un vistazo a<a href="https://github.com/brython-dev/brython/wiki/Brython-videos-and-talks"> estas presentaciones</a> mostradas en varias conferencias.</td>
</td>
<td style="padding-left:5%;">
<canvas width="250" height="250" id="clock">
<i>El navegador no soporta HTML5 canvas<br>o el Javascript es apagado
<br><div id="navig_zone"></div></i>
</canvas>
</td>
</table>

</div>

<div id="content_pt" style="height:1px;visibility:hidden">

<table style="width:80%;margin-left:10%">
<tr>
<td>
<H1 style="font-size:300%;">Brython</H1>
<H2>Uma implementação de Python 3 para a programação web do lado do cliente</H2>
</td>
<td valign="top">
<select class="language" id="change_lang_pt">
<option value="en">English
<option value="es">Espa&ntilde;ol
<option value="fr">Fran&ccedil;ais
<option value="pt" selected>Portugu&ecirc;s
</select>
</td>
</tr>
</table>

<table style="width:80%;margin-left:10%">
<tr>
<td style="width:60%;font-size:16px;">
Sem dúvida você já viu um relógio como este em demonstrações de HTML5
<p>
Entretanto, clique com o botão direito e veja o código fonte desta págna...
<p>Não é código em Javascript! Em vez disso, você encontrará código em Python em um script do tipo "text/python"
<p>Brython foi desenhado para substituir o Javascript como a linguagem de script da Web. Como tal, é uma implementação de Python 3 (você pode testar no <a href="console.html" id="c_pt">console</a>), adaptada ao ambiente HTML5, quer dizer, com uma interface para objetos e eventos DOM
<p>A <a href="/gallery/gallery_pt.html">galeria</a> apresenta algumas possibilidades, da criaçao de simples elementos de documentos até a ação de arrastar e soltar e navegação em 3D
</td>

<td style="padding-left:5%;">
<canvas width="250" height="250" id="clock">
<i>Desculpe, Brython não consegue fazer a demonstração funcionar em seu navegador, <br>verifique se o Javascript está ligado
<br><div id="navig_zone"></div></i>
</canvas>
</td>

</tr>

</table>

</div>


</body>
</html>
